<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/vue"></script>
    <!-- 会使用最新版本，你最好指定一个版本 -->
    <script src="https://unpkg.com/naive-ui"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>

<body class="h-screen flex p-4">
    <div id="app" class="w-full h-screen">
        <n-modal v-model:show="showModal">
            <n-split direction="horizontal" :max="1" :min="0">
                <template #1>
                    <n-image lazy class="rounded-lg" :src="this.origin_url"></n-image>
                </template>
                <template #2>
                    <n-image lazy class="rounded-lg" :src="this.ps_url"></n-image>
                </template>
            </n-split>
        </n-modal>
        <div class="flex flex-row justify-end">
            <div>
                <n-input @blur="changeKey()" v-model:value="key" placeholder="备注钥匙" />
            </div>
        </div>
        <div class="md:p-16">
            <div class="mb-16" v-for="(item,index) in photos">
                <div class="flex flex-row justify-start items-center gap-4">
                    <span class="font-semibold text-lg">
                        {item.id}: {item.name}
                    </span>
                    <div v-if="item.ps_url" @click="compare(item)" class="font-semibold cursor-pointer text-lg">
                        对比
                    </div>
                </div>
                <div class="grid md:grid-cols-3 sm:grid-cols-1 md:gap-4 sm:gap-1">
                    <div class="flex flex-col justify-end rounded-lg items-center p-1 mb-2 bg-gray-100">
                        <n-image lazy class="rounded-lg" :src="item.origin_url"></n-image>
                        <span class="text-gray-800 mt-1 font-semibold">原图</span>
                    </div>
                    <div class="flex flex-col justify-end  rounded-lg items-center p-1 mb-2 bg-gray-100">
                        <n-image lazy v-if="item.ps_url" class="rounded-lg" :src="item.ps_url"></n-image>
                        <n-upload @before-upload="beforeUploadPSURL(index)" @finish="handleFinishPSURL"
                            v-if="!item.ps_url" directory-dnd name="image" action="/v1/common/upload/image" :max="1">
                            <n-upload-dragger>
                                <div style="margin-bottom: 12px">
                                    <n-icon size="48" :depth="3">
                                        <archive-icon />
                                    </n-icon>
                                </div>
                                <n-text style="font-size: 16px">
                                    点击或者拖动文件到该区域来上传
                                </n-text>
                            </n-upload-dragger>
                        </n-upload>
                        <span class="text-gray-800 mt-1 font-semibold">修之后</span>
                    </div>
                    <div class="flex flex-col justify-end  rounded-lg items-center p-1 mb-2 bg-gray-100">
                        <n-image lazy v-if="item.demo_url" class="rounded-lg" :src="item.demo_url"></n-image>
                        <n-upload @before-upload="beforeUploadPSURL(index)" @finish="handleFinishDemoURL"
                            v-if="!item.demo_url" directory-dnd name="image" action="/v1/common/upload/image" :max="1">
                            <n-upload-dragger>
                                <div style="margin-bottom: 12px">
                                    <n-icon size="48" :depth="3">
                                        <archive-icon />
                                    </n-icon>
                                </div>
                                <n-text style="font-size: 16px">
                                    点击或者拖动上传参考图
                                </n-text>
                            </n-upload-dragger>
                        </n-upload>
                        <span class="text-gray-800 mt-1 font-semibold">参考图</span>
                    </div>
                </div>
                <div class="mt-4 text-sm">
                    <n-form-item label="备注" path="user.name">
                        <n-input :disabled="this.disabled" @blur="changeRemark(index, item.remark)"
                            v-model:value="item.remark" type="textarea" placeholder="修改备注" />
                    </n-form-item>
                </div>
            </div>
            <n-upload v-if="upload" @finish="handleFinish" directory-dnd name="image" action="/v1/common/upload/image"
                :max="1">
                <n-upload-dragger>
                    <div style="margin-bottom: 12px">
                        <n-icon size="48" :depth="3">
                            <archive-icon />
                        </n-icon>
                    </div>
                    <n-text style="font-size: 16px">
                        点击或者拖动文件到该区域来上传，上传新图片
                    </n-text>
                </n-upload-dragger>
            </n-upload>
        </div>
    </div>
    <script>
        const App = {
            delimiters: ['{', '}'],
            data: () => {
                return {
                    photos: {},
                    currentIdex: 0,
                    upload: true,
                    showModal: false,
                    origin_url: "",
                    ps_url: "",
                    disabled: true,
                    key: ""
                }
            },
            mounted() {
                this.init()
            },
            methods: {
                init() {
                    const requestOptions = {
                        method: 'GET',
                    };
                    fetch("/v1/photos", requestOptions).then(res => res.json()).then(data => {
                        this.photos = data.data
                    })
                },
                compare(item) {
                    this.showModal = true
                    console.log(item, this.showModal)
                    this.origin_url = item.origin_url
                    this.ps_url = item.ps_url
                },
                changeRemark(index, remark) {
                    console.log(index, remark)
                    const requestOptions = {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ id: this.photos[index].id, remark }),
                    };
                    fetch(`/v1/photos/${this.photos[index].id}/remark`, requestOptions).then(res => {
                        if (!res.ok) {
                            Swal.fire("备注失败!");
                            return
                        }
                        return res.json()
                    }).then(data => {
                        console.log(data)
                        this.photos[index].remark = remark
                        Swal.fire("备注成功!");
                    })
                },
                setPSURL(ps_url) {
                    const requestOptions = {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ id: this.photos[this.currentIdex].id, ps_url }),
                    };
                    fetch(`/v1/photos/${this.photos[this.currentIdex].id}/ps`, requestOptions).then(res => {
                        if (!res.ok) {
                            Swal.fire("上传失败!");
                            this.photos[this.currentIdex].ps_url = ""
                            return
                        }
                        return res.json()
                    }).then(data => {
                        console.log(data)
                        this.photos[this.currentIdex].ps_url = ps_url
                    })
                },
                setDemoURL(demo_url) {
                    const requestOptions = {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ id: this.photos[this.currentIdex].id, demo_url }),
                    };
                    fetch(`/v1/photos/${this.photos[this.currentIdex].id}/demo`, requestOptions).then(res => {
                        if (!res.ok) {
                            Swal.fire("上传失败!");
                            this.photos[this.currentIdex].demo_url = ""
                            return
                        }
                        return res.json()
                    }).then(data => {
                        console.log(data)
                        this.photos[this.currentIdex].demo_url = demo_url
                    })
                },
                setOriginURL(origin_url, name) {
                    const requestOptions = {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ origin_url, name }),
                    };
                    fetch(`/v1/photos`, requestOptions).then(res => {
                        if (!res.ok) {
                            Swal.fire("上传失败!");
                            return
                        }
                        return res.json()
                    }).then(data => {
                        console.log(data)
                        Swal.fire("上传成功!");
                        window.location.reload()
                    })
                },
                beforeUploadPSURL(index) {
                    this.currentIdex = index
                },
                handleFinishPSURL({ file, event }) {
                    console.log(file, event)
                    response = JSON.parse(event.currentTarget.response);
                    if (response.data.image_url) {
                        this.setPSURL(response.data.image_url)
                    } else {
                        Swal.fire("上传失败!");
                    }
                    return file;
                },
                handleFinishDemoURL({ file, event }) {
                    console.log(file, event)
                    response = JSON.parse(event.currentTarget.response);
                    if (response.data.image_url) {
                        this.setDemoURL(response.data.image_url)
                    } else {
                        Swal.fire("上传失败!");
                    }
                    return file;
                },
                handleFinish({ file, event }) {
                    response = JSON.parse(event.currentTarget.response);
                    if (response.data.image_url) {
                        this.setOriginURL(response.data.image_url, response.data.name)
                    } else {
                        Swal.fire("上传失败!");
                    }
                    return file;
                },
                changeKey() {
                    this.disabled = this.key != "sweetsunnyflower"
                    console.log(this.disabled)
                }
            }
        }
        const app = Vue.createApp(App)
        app.use(naive)
        app.mount('#app')
    </script>
</body>

</html>